<!DOCTYPE html>
<html>
	<head>
		<title>模板列表</title>

	    <style type="text/css">
    	    body {
    	        margin: 20px;
    	        background: #f5f5f5;
    	        font: 12px/24px Verdana, Geneva, sans-serif;
    	    }
    	    ul, li, p {
    	        margin: 0;
    	        padding: 0;
    	        list-style: none;
    	    }
    	    a {
    	        text-decoration: none;
    	        color: #666;
    	    }


    	    /*模板列表样式*/
    	    .Template_title {
    	        background: none;
    	        border-bottom: 1px solid #e2e2e2;
    	        line-height: 33px;
    	        height: 33px;
    	    }
    	    .Template_title span {
    	        font: bold 14px/30px "宋体";
    	        color: #666;
    	        padding-left: 7px;
    	    }

    	    .Edit_t {
    	        margin: 20px 0;
    	        background-color: #ededed;
    	        padding: 10px 0;
    	        height: 210px;
    	        clear: both;border: 1px solid #aaa;
    	    }
    	    .Edit_t .l {
    	        float: left;
    	        width: 250px;
    	        border-right: 1px dotted #c2c2c2;
    	    }
    	    .Edit_t .l p {
    	        margin: 3px 0;
    	        text-align: center;
    	        color: #808080;
    	    }
    	    .Edit_t .l p img {
    	        border: 5px solid #c2c2c2;
    	    }
    	    .Edit_t .l p a.t, .List_t ul li p a.t {
    	        color: #808080;
    	        font-weight: bold;
    	    }
    	    .Edit_t .l p a.t:hover, .List_t ul li p a.t:hover {
    	        color: #cb221a;
    	    }
    	    .Edit_t .l p a.btn, .List_t ul li p a.btn {
    	        background: #0066cc;
    	        display: inline-block;
    	        height: 20px;
    	        line-height: 18px;
    	        line-height: 21px\9;
    	        *line-height: 21px;
    	        text-align: center;
    	        color: #fff;
    	        width: 40px;
    	        *zoom: 1;
    	    }
    	    .Edit_t .l p a.btn:hover, .List_t ul li p a.btn:hover {
    	        text-decoration: underline;
    	    }

    	    .Edit_t .r {
    	        float: left;
    	        margin-left: 50px;
    	    }
    	    .Edit_t .r h1 {
    	        font-size: 14px;
    	        color: #666;
    	        margin: 3px 0;
    	    }

    	    .Edit_t .r p {
    	        color: #8c8c8c;
    	        margin: 7px 0;
    	    }
    	    .Edit_t .r p img {
    	        margin: 25px 0 10px;
    	    }

    	    .Edit_t .r p a.btn {
    	        display: inline-block;
    	        color: #ff6600;
    	        font: bold 14px/30px "宋体";
    	        line-height: 30px;
    	        text-align: center;
    	        *display: inline;
    	        *zoom: 1;
    	        background: #ffffcc;
    	        border: solid 1px #ff6600;
    	        width: 128px;
    	        height: 30px;
    	        margin-left: 50px;
    	    }
    	    .Edit_t .r p.btns {
    	        margin-left: 15px;
    	        margin-top: 30px;
    	    }


    	    .List_t {
    	        margin: 20px 0;
    	    }
    	    .List_t ul {
    	        clear: both;
    	        margin-bottom: 20px;
    	        margin-left: 25px;
    	    }
    	    .List_t ul li {
    	        width: 120px;
    	        display: inline-block;
    	        *display: inline;
    	        *zoom: 1;
    	        padding: 0 40px;
    	        height: 280px;
    	        text-align: center;
    	    }
    	    .List_t ul li p img, span.thumbnail
    	    {
    	        width: 100px;
    	        height: 120px;
    	        margin: 4px;
    	        border: 1px solid #c2c2c2;
    	    }
    	    span.thumbnail {display: block;padding-top: 40px;height: 80px;margin: 0 auto;}
    	    p.thumbnail img {width: 100px;height: 120px;}
    	    p.thumbnail { text-align: center; }
    	    .List_t ul li p img:hover, span.thumbnail:hover {
    	        margin: 0;
    	        border: 5px solid #c2c2c2;
    	    }

    	    p.thumbnail span.thumbnail:hover {margin: 0 auto;border: 1px solid #c2c2c2;}
    	    .Page_t {
    	        text-align: right;
    	        margin: 10px;
    	    }
    	    .Page_t a.btn {
    	        background: red;
    	        line-height: 16px;
    	        height: 18px;
    	        text-align: center;
    	        color: #fff;
    	        width: 30px;
    	        display: inline-block;
    	        *display: inline;
    	        *zoom: 1;
    	    }

    	    /*清除浮动*/
    	    .wrapfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
    	    .wrapfix { display: inline-table; }
    	    * html .wrapfix { height: 1%; }
    	    .wrapfix { display: block; }


    	    .uploadform { position: relative; }
    	    .tplfileC {position: absolute;top: 0px;left: 198px;width: 72px;height: 30px;overflow: hidden;}
    	    .tplfile {opacity: 0;filter: alpha(opacity=0);overflow: hidden;height: 30px;cursor: pointer;margin-left: -133px;width: 200px;}
    	    .hidden { display: none; }

    	</style>
	</head>
<body>

<div class="Template_title"><span>模板设置</span></div>
	
	<div class="Edit_t">
		<div class="l">
			<p>当前使用模板</p>
			<p class="thumbnail">${currentThumbnail}</p>
			<p><a href="javascript:;" class="t">${currentName}</a></p>
			<p><a class="btn edit" href="tpl:${current}">编辑</a>&nbsp;<a class="btn down" href="tpl:${current}">下载</a></p>
		</div>
		<div class="r">
			<h1>自定义模板</h1>
			<p>想要打造一个专属于自己的个性模板吗？立刻动手DIY一个独一无二的绚丽模板吧!</p>
			<!--<p><img src="/Content/themes/Admin/Default/template/flow_img.jpg" /></p>-->
            <div class="uploadform" id="zipform">
                <input type="hidden" name="module" value="template" />
                <input type="hidden" name="action" value="extractZip" />
                <p class="btns">
                    <a href="http://to2.net/cms/cms/template_demo.html" target="_blank" class="btn" style="margin-left: 0;">下载示例包</a>
                    <a id="upload_btn" href="javascript:;" class="btn upload" style="width: 70px">上传模板</a>
                </p>
                <div class="tplfileC"><input type="file" class="tplfile" id="tplfile" name="tplfile"/></div>
            </div>
            <br />
            <p><b>网络安装:</b><input type="text" value="请输入模板安装包地址..." onfocus="if (this.value == '请输入模板安装包地址...') this.value = ''" onblur="    if (this.value == '') this.value = '请输入模板安装包地址...'" style="width:400px"/><a class="btn install" href="javascript:;" style="width:40px;height:22px;line-height:22px;">安装</a></p>
		</div>
	</div>
	<div class="Template_title"><span>模板列表</span></div>
	<div class="List_t">
		<ul>
            <!--  
			<li>
				<p><a href="javascript:;"><img src="/Templet/@tpl/ScreenShot.jpg" alt="点击切换模板" class="shot @tpl"/></a></p>
				<p><a href="" class="t">@tpl</a></p>
				<p><a class="btn edit" href="tpl:@tpl">编辑模板</a><a class="btn down" href="tpl:${tpl}">下载</a></p>
			</li>
            -->

            ${list}

		</ul>

        <!--
		<div class="Page_t">
			<a class="btn" href="">上一页</a>
			<a class="btn" href="">下一页</a>
		</div>
        -->

	</div>
	
	$js()
   <script type="text/javascript">
       var file = jr.$('tplfile');
       var _file = '';

       function reset() {
           file.value = '';
           _file = '';
       }

       reset();

       jr.each(document.getElementsByClassName('edit'), function (i, e) {
           e.href = 'javascript:jr.tab.open(\'编辑模板\',\'?module=template&action=edit&tpl=' + e.toString().split(':')[1]+'\')';
       });

       //下载模板
       jr.each(document.getElementsByClassName('down'), function (i, e) {
           e.href = '?module=template&action=DownloadZip&tpl=' + e.toString().split(':')[1];
       });

       jr.each(document.getElementsByClassName('shot'), function (i, e) {
           return false;
           e.onclick = function () {
               if (confirm('确定切换模板吗?')) {
                   var tpl = e.className.split(' ')[1];
                   jr.xhr.jsonPost('?module=template&action=templateAsDefault', 'xhr=1&tpl=' + encodeURIComponent(tpl), function (json) {
                       if (json.result) {
                          showMsg2('切换成功!');
                           location.reload();
                       }
                   });
               }
           }
       });


       jr.each(document.getElementsByClassName('install'), function (i, e) {
           e.onclick = function () {
               var url = this.previousSibling.value;
               if (!/\.zip$/.test(url)) {
                   alert('不是有效的模板压缩包(*.zip)文件');
               } else {
                   jr.xhr.jsonPost('?module=template&action=netinstall', 'xhr=1&url=' + encodeURIComponent(url), function (json) {
                       if (json.result) {
                           showMsg2('安装完成!', function () {
                               location.replace(location.href);
                           });
                       } else {
                           alert('安装出现问题,请重试');
                       }
                   });
               }
           };
       });


      var upCom = jr.upload({
           id: 'upload_btn',
           debug: !true,
           url:"?module=template&action=UploadInstall",
           exts: '*.gif;*.jpg;*.png;*.bmp;*.jpeg'
       }, function (result, data) {
           if (result) {
               showMsg2(data.msg,function(){
               if (data.msg.indexOf('成功') != -1) {
                   location.reload();
               }
               });
           } else {
               showErr('上传失败：' + data, 2000);
           }
       });

      upCom.onFileChanged = function (file) {
           if (/\.zip$/.test(file.value)) {
               upCom.upload();
           } else {
               alert('不是有效的模板压缩包(*.zip)文件');
           }
       };

   </script>
</body>
</html>